﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="http://static.app/vue/index.css" rel="stylesheet">
    <link href="http://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="http://static.app/vue/vue.js"></script>
    <script src="http://static.app/vue/index.js"></script>
</head>
<body class="body" style="-webkit-app-region: drag; ">
<div id="app">
    <el-row>
        <el-col :span="6" class="col_1">
            <el-progress :color="colorNum" :percentage="percentageNum" show-text="false" style="-webkit-app-region: drag; " type="circle" width="30"></el-progress>
        </el-col>
        <el-col :span="18" class="col_2" ondblclick="junm()">
            {{percentageNum}}%
        </el-col>
    </el-row>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            colorNum: "#409EFF",
            percentageNum: 0,
        },
        methods: {
            onload: function () {
                this.jss();
                //定义this指向
                const that = this
                // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
                setTimeout(function () {
                    that.onload();
                }, 1000);
            },
            jss: function () {
                const tstart = Date.parse(new Date('2023-7-1 09:00:00'))
                const tnow = Date.parse(new Date());
                const tend = Date.parse(new Date('2026-7-1 09:00:00'))
                const countNum = tend - tstart;
                const ingNum = tnow - tstart;
                this.percentageNum = (ingNum * 100 / countNum).toFixed(6);
            }
        }
    });

    window.onload = function () {
        app.onload();
    }

    function junm() {
        Formium.external.fun.jumpMain();
    }
</script>
<style>
    .body {
        background: transparent;
        overflow: hidden;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;

    }

    #app {
        margin-top: 4px;
        background: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
        border-radius: 10px;
    }

    .col_1 {
        text-align: center;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: -2px;
        padding-top: 2px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    .col_2 {
        text-align: center;
        padding-top: 6px;
        cursor: Pointer;
        color: #ffffff;
    }

    .el-progress__text {
        display: none;
    }
</style>
</body>
</html>